<template>
  <div class="bindBackup">
    <editPageNew
      ref="editPage"
      :rightBtnArr="rightBtnArr"
    >
      <div class="backupMain">
        <div style="width: 45%;">
          <equipmentBackupSelect ref="equipmentSelect" style="width: 100%;height: 700px" :seleteSetting="seleteSetting">
          </equipmentBackupSelect>
        </div>
        <div class="backupMiddle">
          <span>绑定</span>
          <img src="@/assets/img/arrow.png" alt="">
        </div>
        <div style="width: 45%;">
          <backSelect ref="backSelect" style="width: 100%;height: 700px"></backSelect>
        </div>
      </div>
    </editPageNew>
  </div>
</template>

<script>
import backSelect from "./backupSelect.vue";
import equipmentBackupSelect from "./equipmentBackupSelect.vue";
import {
  commitBindBatch, // 批量绑定
} from "@/api/equipmentLedger/equipmentBackup.js"
export default {
  components: {
    backSelect,equipmentBackupSelect
  },
  data(){
    return {
      showUser: false,
      seleteSetting: {
         multiple: true, //单选还是多选
        chosedData: [],
        filterConfig: [],
        managerUnit: [],
        standardType: "",
      }
    }
  },
  methods: {
    doSubmit(type){
      // 获取已选择的设备
      let eqData = this.$refs.equipmentSelect.getSelectData();
      let backupData = this.$refs.backSelect.getSelectData();
      if(!eqData.length){
        this.$message.warning("请选择设备！！！");
      }else if(!backupData.length){
        this.$message.warning("请选择备品备件！！！");
      }else{
        // 封装数据
        let bindList = [];
        backupData.map(i=>{
          eqData.map(j=>{
            let obj = {};
            obj = {
              equip_id: j.id,
              equip_name: j.name,
              level: j.level,
              parentId: j.parentId,
              parentName: j.parentName,
              sort: j.sort,
              status: j.status,
            }
            i.backApply.push(obj);
          })
        })
        commitBindBatch(backupData).then(res=>{
          if(res.code==200){
            this.$message.success("操作成功");
            setTimeout(()=>{
              this.$confirm('是否继续绑定批量设备?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$refs.equipmentSelect.clearAll();
              this.$refs.backSelect.clearAll();
            }).catch(() => {
              this.$utils.updateStorage();
              this.$refs.editPage.closePage(500);        
            });
            },500)
            
          }
        })
      }
    },
  },
  computed: {
    rightBtnArr(){
      let arr = [
        {
          text: "提交",
          icon: "el-icon-position",
          content: this.$store.getters["isBtnAuth"]("edit")
            ? ""
            : "未授权此功能！",
          disabled:!this.$store.getters["isBtnAuth"]("edit"),
          methods: () => {
            this.doSubmit("submit");
          }
        },
      ];
      return arr;
    }
  }
}
</script>

<style lang="less" scoped>
  .bindBackup{
    height: 100%;
    background-color: #ffffff;
    .backupMain{
      div{
        display: inline-block;
        float: left;
      }
      .backupMiddle{
        width: 10%;
        height: 700px;
        span{
          display: inline-block;
          width: 100%;
          margin-top: 300px;
          font-size: 20px;
        }
        img{
          margin-top: -15px;
            display: inline-block;
            vertical-align: middle;
            width: 90%;
            height: 100px;
          }
      }
    }
  }
</style>